<template>
  <a-modal
    :title="title"
    style="top: 100px;"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <a-form :form="form" >
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="考评名称" >
        <a-input
          style="width: 360px"
          placeholder="请输入考评名称"
          v-decorator="['kpmc',{rules: [{ required: true, message: '请选择考评名称信息' },{ max:20,message:'长度不能超过20个字'}]}]"
        />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="考评计划" >
        <a-select
          placeholder="请输入考评计划"
          v-decorator="['kpjhbid',{rules: [{ required: true, message: '请选择考评计划信息' }]}]"
          @change="changePlan"
          style="width:360px">
          <a-select-option v-for="d in planList" :value="d.id" :key="d.id">
            {{ d.kpjhmc }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="考评人" >
        <a-select
          placeholder="请选择考评人"
          mode="multiple"
          :maxTagCount="5"
          v-decorator="['kpr',{rules: [{ required: true, message: '请选择考评人' }]}]"
          style="width:360px">
          <a-select-option v-for="d in userList" :value="d.ID" :key="d.ID">
            {{ d.NAME }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="检查方式" >
        <a-select placeholder="请选择检查方式" v-decorator="['jcfs']" style="width:360px">
          <a-select-option :value="'1'" >四不两直检查</a-select-option>
          <a-select-option :value="'2'" >定期检查</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开始日期" >
        <a-date-picker v-decorator="['kssj']" style="width:360px" valueFormat="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结束日期" >
        <a-date-picker v-decorator="['jssj']" style="width:360px" valueFormat="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注" >
        <a-textarea placeholder="请输入备注" :rows="5" v-decorator="['bz',{rules: [{ max:500,message:'长度不能超过500个字'}]}]" style="width:360px"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { TreeSelect } from 'ant-design-vue'
import { getPlan, addInfo, getUserByOrgCode } from '@/api/parBasicData'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
export default {
  name: 'PersonScoreManageAdd',
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      SHOW_PARENT,
      title: '',
      planList: [],
      userList: []
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {

  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  methods: {
    add (orgTree) {
      this.orgTree = orgTree
      this.title = '新增'
      this.initPlan()
      this.visible = true
    },
    close () {
      this.$emit('close')
      this.form.resetFields()
      this.planList = []
      this.userList = []
      this.visible = false
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          const param = []
          for (let i = 0; i < values.kpr.length; i++) {
            const entity = {}
            Object.assign(entity, values)
            entity.kpr = values.kpr[i]
            param.push(entity)
          }
          this.confirmLoading = true
          // 在这里调用新增接口
          return addInfo(
            param
          ).then(
            res => {
              if (res.status === 200) {
                this.$notification['success']({
                  message: '保存成功',
                  duration: 2
                })
                this.visable = false
              } else {
                this.$notification['error']({
                  message: res.message,
                  duration: 4
                })
              }
            }
          ).catch(() =>
            this.$notification['error']({
              message: '出现异常，请联系系统管理员',
              duration: 4
            })
          ).finally(() => {
            this.confirmLoading = false
            this.close()
          })
        }
      })
    },
    handleCancel () {
      this.close()
    },
    initPlan () {
      const param = {}
      param.scbj = '0'
      param.type = '2'
      param.deptCode = this.userInfo.orgCode
      getPlan(param).then(res => {
        this.planList = res
      })
      this.userList = []
      getUserByOrgCode({ orgCode: this.userInfo.orgCode }).then(res => {
        this.userList = res
      })
    },
    changePlan (val) {
      const plan = this.planList.filter(item => item.id === val)[0]
      this.form.setFieldsValue({
        jcfs: plan.jcfs,
        kssj: plan.kssj,
        jssj: plan.jssj,
        bz: plan.bz
      })
    }
  }
}
</script>
